<!-- 电磁装备部署器组件 -->
<template>
  <div class="equipment-deployer">
    <div class="deployer-header">
      <h3 class="header-title">
        <el-icon><Setting /></el-icon>
        装备部署
      </h3>
    </div>
    
    <el-collapse v-model="activeCategories" class="equipment-collapse">
      <el-collapse-item title="雷达设备" name="radar">
        <div class="equipment-grid">
          <div
            v-for="radar in radarEquipment"
            :key="radar.id"
            class="equipment-card"
            draggable="true"
            @dragstart="handleDragStart($event, radar)"
          >
            <div class="equipment-icon">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="equipment-info">
              <div class="equipment-name">{{ radar.name }}</div>
              <div class="equipment-type">{{ radar.type }}</div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      
      <el-collapse-item title="干扰设备" name="jammer">
        <div class="equipment-grid">
          <div
            v-for="jammer in jammerEquipment"
            :key="jammer.id"
            class="equipment-card"
            draggable="true"
            @dragstart="handleDragStart($event, jammer)"
          >
            <div class="equipment-icon jammer">
              <el-icon><MagicStick /></el-icon>
            </div>
            <div class="equipment-info">
              <div class="equipment-name">{{ jammer.name }}</div>
              <div class="equipment-type">{{ jammer.type }}</div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      
      <el-collapse-item title="平台载具" name="platform">
        <div class="equipment-grid">
          <div
            v-for="platform in platformEquipment"
            :key="platform.id"
            class="equipment-card"
            draggable="true"
            @dragstart="handleDragStart($event, platform)"
          >
            <div class="equipment-icon platform">
              <el-icon v-if="platform.category === 'ship'"><Ship /></el-icon>
              <el-icon v-else><Aim /></el-icon>
            </div>
            <div class="equipment-info">
              <div class="equipment-name">{{ platform.name }}</div>
              <div class="equipment-type">{{ platform.type }}</div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Setting, MagicStick, Ship, Aim, Monitor } from '@element-plus/icons-vue'

const emit = defineEmits(['dragStart'])

const activeCategories = ref(['radar', 'jammer', 'platform'])

// 设备数据
const radarEquipment = ref([
  { id: 'radar_1', name: '防空雷达', type: 'S波段', category: 'radar', frequency: '2-4GHz' },
  { id: 'radar_2', name: '搜索雷达', type: 'X波段', category: 'radar', frequency: '8-12GHz' },
  { id: 'radar_3', name: '火控雷达', type: 'Ka波段', category: 'radar', frequency: '26-40GHz' }
])

const jammerEquipment = ref([
  { id: 'jammer_1', name: '通信干扰机', type: 'VHF/UHF', category: 'jammer', power: '100W' },
  { id: 'jammer_2', name: '雷达干扰机', type: '宽频段', category: 'jammer', power: '500W' },
  { id: 'jammer_3', name: 'GPS干扰机', type: 'L1/L2', category: 'jammer', power: '50W' }
])

const platformEquipment = ref([
  { id: 'ship_1', name: '驱逐舰', type: 'DDG', category: 'ship', speed: '30节' },
  { id: 'ship_2', name: '护卫舰', type: 'FFG', category: 'ship', speed: '28节' },
  { id: 'aircraft_1', name: '战斗机', type: 'F-16', category: 'aircraft', speed: '马赫2.0' },
  { id: 'aircraft_2', name: '预警机', type: 'E-2C', category: 'aircraft', speed: '马赫0.6' }
])

const handleDragStart = (event, equipment) => {
  event.dataTransfer.setData('equipment', JSON.stringify(equipment))
  emit('dragStart', equipment)
}
</script>

<style scoped>
.equipment-deployer {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止整个组件溢出 */
}

.deployer-header {
  padding: 1.2vh 1.5vw;
  border-bottom: 1px solid #2d3a4b; /* 深色边框 */
  background: linear-gradient(135deg, #1f2d3d, #263445); /* 深色渐变 */
}

.header-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #409EFF; /* 使用统一的主题色 */
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.equipment-collapse {
  flex: 1;
  border: none;
  background: transparent;
  overflow-y: auto; /* 允许垂直滚动 */
  overflow-x: hidden; /* 隐藏水平滚动 */
}

/* 深色主题滚动条样式 */
.equipment-collapse::-webkit-scrollbar {
  width: 8px;
}

.equipment-collapse::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 4px;
}

.equipment-collapse::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.equipment-collapse::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}

.equipment-collapse :deep(.el-collapse-item__header) {
  background: #1f2d3d !important; /* 深色背景 */
  border: none;
  padding: 1vh 1.5vw;
  font-weight: 500;
  font-size: 0.95rem;
  color: #bfcbd9 !important; /* 深色主题文字 */
}

.equipment-collapse :deep(.el-collapse-item__content) {
  padding: 1vh 1vw;
  background: #263445 !important; /* 深色背景 */
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr));
  gap: 1vh;
}

.equipment-card {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vh 1vw;
  background: #1f2d3d; /* 深色背景 */
  border: 1px solid #2d3a4b; /* 深色边框 */
  border-radius: 0.8vh;
  cursor: move;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.equipment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.3vh;
  background: #409EFF; /* 主题色 */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.equipment-card:hover {
  border-color: #409EFF; /* 主题色边框 */
  box-shadow: 0 0.4vh 1.2vh rgba(64, 158, 255, 0.3); /* 加深阴影 */
  transform: translateY(-0.2vh);
}

.equipment-card:hover::before {
  transform: translateX(0);
}

.equipment-icon {
  width: 3.5vw;
  height: 3.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(64, 158, 255, 0.2); /* 半透明主题色背景 */
  border-radius: 50%;
  font-size: 1.8rem;
  color: #409EFF; /* 主题色 */
}

.equipment-icon.jammer {
  background: rgba(230, 162, 60, 0.2); /* 半透明警告色背景 */
  color: #E6A23C; /* 警告色 */
}

.equipment-icon.platform {
  background: rgba(103, 194, 58, 0.2); /* 半透明成功色背景 */
  color: #67C23A; /* 成功色 */
}

.equipment-info {
  flex: 1;
  min-width: 0;
}

.equipment-name {
  font-weight: 500;
  color: #bfcbd9; /* 深色主题文字 */
  font-size: 0.9rem;
  margin-bottom: 0.3vh;
}

.equipment-type {
  font-size: 0.8rem;
  color: #8591a3; /* 深色主题次要文字 */
  opacity: 0.8;
}

/* Element Plus 组件深色主题覆盖 */
:deep(.el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-input__inner) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

:deep(.el-select .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-input__inner::placeholder) {
  color: #8591a3 !important;
}

:deep(.el-input__wrapper:focus),
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}
</style>